<template>
  <div class="connect">
    <div class="connect_box">
      <el-form :inline="true" :model="selectForm" class="demo-form-inline">
        <!-- manifestNo:null,//批次号
        orderNumber:null,//订单号
        logisticsNo:null,//运单号
        userId:null,//用户ID
        orderStartTime:null,//下单起始时间
        orderEndTime:null,//下单结束时间
        occurrenceStartTime:null,//费用发生起始时间
        occurrenceEndTime:null,//费用发生结束时间 -->
        <el-form-item  :label="$t('Order_module.Batch_number')">
          <!-- 批次号 -->
          <el-input v-model="selectForm.manifestNo"  :placeholder="$t('Order_module.Batch_number')"></el-input>
        </el-form-item>
        <el-form-item  :label="$t('Order_module.Order_No')">
          <!-- 订单号 -->
          <el-input v-model="selectForm.orderNumber"  :placeholder="$t('Order_module.Order_No')"></el-input>
        </el-form-item>
        <el-form-item  :label="$t('Order_module.Waybill_number')">
          <!-- 运单号 -->
          <el-input v-model="selectForm.logisticsNo"  :placeholder="$t('Order_module.Waybill_number')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('Order_module.User')">
          <!-- 所属用户 -->
          <el-select v-model="selectForm.userId" :placeholder="$t('Order_module.User') ">
              <el-option v-for="item in userList" :key="item.id" :label="item.userName" :value="item.id">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item  :label="$t('public.Order_time')">
          <!-- 下单时间 -->
          <el-date-picker
                v-model="selectForm.Order_time"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="-"
                :start-placeholder="$t('public.time_on')"
                :end-placeholder="$t('public.End_Time')"
                @change="Order_timeChange"
                >
              </el-date-picker>
        </el-form-item>
        <el-form-item  :label="$t('public.Expense_occurrence_time')">
          <!-- 费用发生时间 -->
          <el-date-picker
                v-model="selectForm.occurrence_time"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="-"
                :start-placeholder="$t('public.time_on')"
                :end-placeholder="$t('public.End_Time')"
                @change="occurrence_timeChange"
                >
              </el-date-picker>
        </el-form-item>



        <el-form-item>
          <el-button :loading="searchLoading" @click="search"  type="primary" >{{$t('public.query')}}</el-button>
          <el-button :loading="resetLoading" @click="resetting">{{$t('public.resetting')}}</el-button>
        </el-form-item>
      </el-form>
      <div style="margin-bottom: 20px;">
        <!-- 条件导出 -->
        <el-button @click="Conditional_export">{{$t('public.Conditional_export')}}</el-button>
        <!-- 选择导出 -->
        <el-button @click="sleect_export">{{$t('public.select_export')}}</el-button>
      </div>


        <el-table :data="tableData" border stripe style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column align="center" type="selection" width="55"> </el-table-column>
          <!-- 批次号 -->
          <el-table-column align="center" prop="manifestNo" :label="$t('Order_module.Batch_number')"  min-width="180"> </el-table-column>
          <!-- 费用发生时间
          <el-table-column align="center" prop="occurrenceTime" :label="$t('public.Expense_occurrence_time')"  min-width="120"> </el-table-column>
          <!-- 订单号 -->
          <el-table-column align="center" prop="orderNumber" :label="$t('Order_module.Order_No')"  min-width="180"> </el-table-column>
          <!--  快递单号-->
          <el-table-column align="center" prop="logisticsNo" :label="$t('Order_module.Waybill_number')"  min-width="180"> </el-table-column>

          <!--费用类型  -->
          <!-- <el-table-column align="center" prop="Order_No" :label="$t('Order_module.Expense_Type')"  min-width="120"> </el-table-column> -->
          <!-- 申报重量 -->
          <el-table-column align="center" prop="declaredWeight" :label="$t('Order_module.Declared_weight')+'(KG)'"  min-width="120">
             <template slot-scope="{row}">
               {{row.declaredWeight?row.declaredWeight:'-'}}
             </template>
          </el-table-column>
          <!-- 京东重量 -->
          <el-table-column align="center" prop="actualWeight" :label="$t('public.JD_Weight')+'(KG)'"  min-width="170">
            <template slot-scope="{row}">
              {{row.actualWeight?row.actualWeight:'-'}}
            </template>
          </el-table-column>
          <!-- 体积重量 -->
          <el-table-column align="center" prop="volumeWeight" :label="$t('public.volume_weight')+'(cm³)'"  min-width="120">
            <template slot-scope="{row}">
              {{row.volumeWeight?row.volumeWeight:'-'}}
            </template>
          </el-table-column>
          <!-- 发件人姓名 -->
          <el-table-column align="center" prop="sendName" :label="$t('public.Sender_name')"  min-width="120"> </el-table-column>
          <!-- 收件人省份 -->
          <el-table-column align="center" prop="addressProvince" :label="$t('public.Destination_Province')"  min-width="120"> </el-table-column>
          <!-- 下单成功时间 -->
          <el-table-column align="center" prop="orderTime" :label="$t('public.Order_success_time')"  min-width="200">
            <template slot-scope="{row}">
              {{row.orderTime?row.orderTime:'-'}}
            </template>
          </el-table-column>
          <!-- 签收时间 -->
          <el-table-column align="center" prop="signingTime" :label="$t('public.Signing_time')"  min-width="200">
            <template slot-scope="{row}">
              {{row.signingTime?row.signingTime:'-'}}
            </template>
          </el-table-column>
          <!-- 所属用户 -->
          <el-table-column align="center" prop="userName" :label="$t('Order_module.User')"  min-width="120"> </el-table-column>

        </el-table>
        <div style="margin-top: 20px;"></div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 50, 200, 400]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
    </div>
  </div>
</template>

<script>
  import {
    accountFlow_list,
    order_searchUser,
    accountFlow_conditionalExport,
    accountFlow_selectExport
  } from '@/api/wqzApi'
  export default {
    components: {},
    data() {
      return {
        resetLoading:false,
        searchLoading:false,
        radio:'1',
        value:null,
        input:'',
        options:[
          {value:1 , label:'选项1'},
          {value:2 , label:'选项1'},
          {value:3 , label:'选项1'},
          {value:4 , label:'选项1'},
        ],
        total:0,
        limit:10,
        page:1,
        tableData:[], //列表数据
        selectForm:{
          manifestNo:'',//批次号
          orderNumber:'',//订单号
          logisticsNo:'',//运单号
          userId:'',//用户ID
          orderStartTime:'',//下单起始时间
          orderEndTime:'',//下单结束时间
          occurrenceStartTime:'',//费用发生起始时间
          occurrenceEndTime:'',//费用发生结束时间
          Order_time:[],//下单时间
          occurrence_time:[],//费用发生事时间
        },

        userList:[], // 用户下拉卡列表
        chooseItem:[]
      }
    },

    created() {
    },
    mounted() {
      this.getList()
      this.getUserList()
    },
    destroyed() {

    },
    methods: {
      search(){
        this.page = 1
        this.searchLoading=true
        this.getList()
      },
     Conditional_export(){
       // 条件导出
       var formData = new FormData()
       formData.append('manifestNo', this.selectForm.manifestNo)
       formData.append('orderNumber', this.selectForm.orderNumber)
       formData.append('logisticsNo', this.selectForm.logisticsNo)
       formData.append('userId', this.selectForm.userId)
       formData.append('orderStartTime', this.selectForm.orderStartTime)
       formData.append('orderEndTime', this.selectForm.orderEndTime)
       formData.append('occurrenceStartTime', this.selectForm.occurrenceStartTime)
       formData.append('occurrenceEndTime', this.selectForm.occurrenceEndTime)
       this.$export_down(accountFlow_conditionalExport() , formData , this.$t('route.Account_flow'))
     },
     sleect_export(){
       // 选择导出

       var ids = []
        this.chooseItem.forEach((item,index)=>{
         ids.push(item.id)
       })
       if(ids.length<=0){
         this.$message({
           type:'warning',
           message:this.$t('public.Please_select_id'),
         })
         return
       }
       this.$export_down(accountFlow_selectExport() , ids , this.$t('route.Account_flow'))
     },
      resetting(){
        this.selectForm = {
          manifestNo:'',//批次号
          orderNumber:'',//订单号
          logisticsNo:'',//运单号
          userId:'',//用户ID
          orderStartTime:'',//下单起始时间
          orderEndTime:'',//下单结束时间
          occurrenceStartTime:'',//费用发生起始时间
          occurrenceEndTime:'',//费用发生结束时间
          Order_time:[],//下单时间
          occurrence_time:[],//费用发生事时间
        }
        this.resetLoading = true
        this.getList()
      },
      getUserList(){
        // 筛选条件的userlist
        order_searchUser({}).then(res=>{
          this.userList = res.users
        })
      },
      Order_timeChange(e){
        // 选择下单时间段
        console.log(e , '88888')
        if(e==null){
          this.selectForm.orderStartTime = ''
          this.selectForm.orderEndTime = ''
        }else{
          this.selectForm.orderStartTime = e[0]
          this.selectForm.orderEndTime = e[1]
        }

      },
      occurrence_timeChange(e){
        // 选择费用发生时间
        if(e==null){
          this.selectForm.occurrenceStartTime = ''
          this.selectForm.occurrenceEndTime = ''
        }else{
          this.selectForm.occurrenceStartTime = e[0]
          this.selectForm.occurrenceEndTime = e[1]
        }
        // this.selectForm.occurrenceStartTime = e[0]
        // this.selectForm.occurrenceEndTime = e[1]
      },
      getList(){

        var data = {
          page:this.page,
          limit:this.limit,
          customerId:this.selectForm.userId,
          ...this.selectForm
        }
        delete data.Order_time
        delete data.occurrence_time
        console.log(data , '搜索条件')
        accountFlow_list(data).then(res=>{
          console.log(res ,'返回信息')
          this.tableData = res.page.list
          this.total = res.page.totalCount
          this.resetLoading = false
          this.searchLoading = false
        }).catch(()=>{
          this.resetLoading = false
          this.searchLoading = false
        })
      },
      handleSelectionChange(e){
        this.chooseItem = e
      },
      handleSizeChange(e){
        this.limit = e
        this.getList()
      },
      handleCurrentChange(e){
        this.page = e
        this.getList()
      }
    }
  }
</script>

<style scoped>
  @import url('Recharge_Record.css');
</style>
